<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- Allow script execution only from the app itself or inline stuff to
         supress the Electron default warning (and also make it safer here) -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Zettlr</title>

    <!-- KaTeX CSS file -->
    <link rel="stylesheet" href="../../node_modules/katex/dist/katex.min.css">
    <!-- Clarity CSS files -->
    <link rel="stylesheet" href="../../node_modules/@clr/icons/clr-icons.min.css">
    <!-- Generated CSS output for the vue components -->
    <link rel="stylesheet" href="./vue/sidebar.css">

    <!-- Include the geometry of the app -->
    <link rel="stylesheet" href="../../common/assets/css/geometry.css">

    <!-- Include the main theme -->
    <link rel="stylesheet" id="theme-css" href="../../common/assets/css/theme-berlin.css">

    <!-- And now the JS -->
    <!-- Hack for recognizing jquery (thanks to https://stackoverflow.com/a/37480521/8651046)-->
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

    <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>

    <!-- Hack for jQuery (part 2) -->
    <script>if (window.module) module = window.module;</script>

    <!-- Load tippy.js -->
    <link rel="stylesheet" href="../../node_modules/tippy.js/dist/tippy.css">

    <!-- Finally load the app. It will load automatically. -->
    <script type="text/javascript" src="../main.js"></script>
</head>
<body>
    <div id="container">

        <!-- Main toolbar -->
        <div id="toolbar">
        </div>

        <!-- Mount the Sidebar -->
        <div id="sidebar"></div>

        <!-- Three: The editor itself -->
        <div id="editor">
          <div id="document-tabs"></div>
            <textarea id="cm-text" style="display:none;" placeholder=""></textarea>
        </div>

        <!--
          Windows window controls, taken from
          https://github.com/sidneys/electron-titlebar-windows (License: MIT)
        -->

        <div class="windows-window-controls">
          <div class="minimise">
            <svg x="0px" y="0px" viewBox="0 0 10 1">
              <rect fill="#000000" width="10" height="1"></rect>
            </svg>
          </div>
          <div class="resize">
            <svg class="maximise-svg" x="0px" y="0px" viewBox="0 0 10 10">
              <mask id="Mask">
                <rect fill="#FFFFFF" width="10" height="10"></rect>
                <path fill="#000000" d="M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z"/>
                <path fill="#000000" d="M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z"/>
              </mask>
              <path fill="#000000" d="M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z" mask="url(#Mask)"/>
            </svg>
          </div>
          <div class="close">
            <svg x="0px" y="0px" viewBox="0 0 10 10">
              <polygon fill="#000000" points="10,1 9,0 5,4 1,0 0,1 4,5 0,9 1,10 5,6 9,10 10,9 6,5"></polygon>
            </svg>
          </div>
        </div>
    </div>
</body>
</html>
